<template>

	<view class="page flex-col">

		<view class="group_1 flex-row">
			<view class="nav-bar_1 flex-row justify-between">
				<f-navbar title=" " fontColor="#fff" bgColor="#3C72FF" navbarType='2' @leftClick=''>
					<view class="u-flex home-conainter" slot="left">
						<view class="actName u-line-1" style="color: #fff;"></view>
					</view>
				</f-navbar>
			</view>
		</view>
		<view class="group_2 flex-col">
			<view class="box_1 flex-row justify-between">
				<view class="box_2 flex-col"></view>
				<text class="text_2">管理报表</text>
			</view>
			<view class="grid_1">
				<u-grid class="list_1" :border="false" :col="4">
					<u-grid-item class="image-text_4 " v-for="(item, index) in loopData0" :key="index">
						<image class="icon_7" :src="item.lanhuimage0" />
						<text class="text-group_4" v-text="item.lanhutext0"></text>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<view class="group_3 flex-col">
			<view class="box_1 flex-row justify-between">
				<view class="box_2 flex-col"></view>
				<text class="text_2">财务报表</text>
			</view>
			<view class="grid_1">
				<u-grid class="list_1" :border="false" :col="4">
					<u-grid-item class="image-text_4 " v-for="(item, index) in loopData1" :key="index"
						@click="openLike(item.url)">
						<image class="icon_7" :src="item.lanhuimage0" />
						<text class="text-group_4" v-text="item.lanhutext0"></text>
					</u-grid-item>
				</u-grid>
			</view>


		</view>

	</view>
</template>


<script>
	const app = getApp();
	import fNavbar from '@/components/f-navbar/f-navbar';
	export default {
		components: {
			fNavbar
		},
		data() {
			return {
				loopData0: [{
						lanhuimage0: '/static/work/accounts_receivable_statistics.png',
						lanhutext0: '应收账款统计表'
					},
					{
						lanhuimage0: '/static/work/accounts_payable_statistics.png',
						lanhutext0: '应付账款统计表'
					},
					{
						lanhuimage0: '/static/work/profit_segment_statement.png',
						lanhutext0: '经营指标'
					},
				],
				loopData1: [{
						url: '/pages/incomestatement/incomestatement',
						lanhuimage0: '/static/work/profit_statement.png',
						lanhutext0: '利润表',
					},
					{
						lanhuimage0: '/static/work/balance_sheet.png',
						url: '/pages/report-items/report-items',
						lanhutext0: '资产负债表',
					},
					{
						lanhuimage0: '/static/work/cash_flow_statement.png',
						url: '/pages/flows/flows',
						lanhutext0: '现金流量表',
					},
					{
						lanhuimage0: '/static/work/business_indicators.png',
						lanhutext0: '部门利润表',
					},
					{
						lanhuimage0: '/static/work/organizational_income_statement.png',
						lanhutext0: '组织机构利润表',
					},
					{
						lanhuimage0: '/static/work/project_profit.png',
						lanhutext0: '项目利润表',
					},


				],
				constants: {},
			};
		},
		methods: {
			openLike(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}else{
					app.globalData.showToast('开发中');
				}
			},
		},
	};
</script>
<style>
	body *,
	page view {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	body {
		font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
			Arial, PingFang SC-Light, Microsoft YaHei;
		margin: 0;
	}

	button {
		margin: 0;
		padding: 0;
		border: 1px solid transparent;
		outline: none;
		background-color: transparent;
	}

	button:active {
		opacity: 0.6;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.justify-start {
		display: flex;
		justify-content: flex-start;
	}

	.justify-center {
		display: flex;
		justify-content: center;
	}

	.justify-end {
		display: flex;
		justify-content: flex-end;
	}

	.justify-evenly {
		display: flex;
		justify-content: space-evenly;
	}

	.justify-around {
		display: flex;
		justify-content: space-around;
	}

	.justify-between {
		display: flex;
		justify-content: space-between;
	}

	.page {
		background-color: rgba(246, 247, 248, 1);
		position: relative;
		width: 750rpx;
		height: 1624rpx;
		overflow: hidden;
	}

	.group_1 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 0px 0px 2px 2px;
		position: relative;
		width: 750rpx;
		height: 380rpx;
	}

	.group_2 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		width: 750rpx;
		height: 346rpx;
		margin: 358rpx 0 0 0rpx;
	}

	.box_1 {
		width: 168rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.box_2 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.text_2 {
		width: 144rpx;
		height: 50rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 50rpx;
	}



	.text_3 {
		width: 44rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(187, 187, 187, 1);
		font-size: 22rpx;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin: 4rpx 0 0 2rpx;
	}

	.text_4 {
		width: 68rpx;
		height: 30rpx;
		overflow-wrap: break-word;
		color: rgba(60, 114, 255, 1);
		font-size: 22rpx;
		font-family: Helvetica;
		font-weight: normal;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;
		margin-top: 4rpx;
	}
	
	.group_3 {
		background-color: rgba(255, 255, 255, 1);
		border-radius: 2px;
		position: absolute;
		//left: 32rpx;
		top: 175rpx;
		width: 750rpx;
		height: 530rpx;
		justify-content: flex-center;
	}

	.section_1 {
		width: 168rpx;
		height: 50rpx;
		margin: 28rpx 0 0 28rpx;
	}

	.group_4 {
		background-color: rgba(60, 114, 255, 1);
		border-radius: 2px;
		width: 8rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.grid_1 {
		padding-top: 30rpx;
	}


	.list_1 {
		width: 660rpx;
		height: 150rpx;
		margin: 32rpx 0 0 12rpx;

		/* 	display: flex;
		
		justify-content: space-between; */
		flex-wrap: wrap;
		display: flex;
		flex-wrap: wrap;

	}

	.image-text_4 {
		flex: 0 0 25%;
		/* 每行显示 4 个元素，占据 25% 宽度 */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;


	}

	/* 以下是关键部分，第二行的两个元素都在左边 */
	.image-text_4:nth-child(n+5) {
		margin-top: 20rpx;
		align-self: flex-start;
	}


	.icon_7 {
		width: 88rpx;
		height: 88rpx;

	}

	.text-group_4 {
		width: 140rpx;
		height: 70rpx;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 28rpx;
		font-weight: normal;
		text-align: center;
		white-space: wrap;
		line-height: 32rpx;
		margin: 24rpx 0 0 2rpx;
	}
</style>